/*
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-10-23 21:11:22
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-11-03 20:46:18
 * @FilePath: \宏烨找房\user\demo\src\page\buyHouse\index.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useEffect, useState } from 'react'
import { ArrowLeft, Ellipsis, Search } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom'
import { DropdownMenu, Input, Picker, Selector, Form, Button, Popup, Toast } from 'react-vant';
import { httpHousings } from '../../api/housing'
import './index.css'
const BuyHouse = () => {
  const navigate = useNavigate();
  const [value, setValue] = useState('');
  const [housing, setHousing] = useState([])
  //弹出层
  const [state, setState] = useState('')
  //房屋亮点
  const [characteristic, setCharacteristic] = useState([])
  //楼层
  const [floor, setFloor] = useState([])
  //朝向
  const [oriented, setOriented] = useState([])
  //户型
  const [roomType, setRoomType] = useState([])
  // 地区选择
  const [pickValue, setPickValue] = useState([])
  // 关闭弹出层
  const onClose = () => setState('')
  //开启弹出层
  const onState = () => {
    setState('right')
  }

  useEffect(() => {
    getData()
  }, [value, pickValue, roomType, oriented, floor, characteristic])
  const getData = async () => {
    const res = await httpHousings('/housings', { value, pickValue, roomType, oriented, floor, characteristic });
    // console.log(pickValue)
    setHousing(res.data.lists);
    if (res.data.code === 200) {
      Toast({
        message: '为您加载以下房源',
      })
    }
  }
  // 地区
  const cascaderData = [
    {
      text: '江苏',
      value: '江苏',
      children: [
        {
          text: '苏州',
          value: '苏州',
          children: [
            { text: '姑苏区', value: '姑苏区' },
            { text: '吴中区', value: '吴中区' },
          ],
        },
        {
          text: '扬州',
          value: '扬州',
          children: [
            { text: '广陵区', value: '广陵区' },
            { text: '邗江区', value: '邗江区' },
          ],
        },
      ],
    },
    {
      text: '浙江',
      value: '浙江',
      children: [
        {
          text: '杭州',
          value: '杭州',
          children: [
            { text: '西湖区', value: '西湖区' },
            { text: '余杭区', value: '余杭区' },
          ],
        },
        {
          text: '温州',
          value: '温州',
          children: [
            { text: '鹿城区', value: '鹿城区' },
            { text: '瓯海区', value: '瓯海区' },
          ],
        },
      ],
    },
  ]
  const option2 = [
    { text: "不限", value: "" },
    { text: "<=10万", value: "10" },
    { text: "20万--50万", value: "20,50" },
    { text: "50万--80万", value: "50,80" },
    { text: ">=80万", value: "80" },
  ]
   const option3 = [
    { text: "不限", value: "" },
    { text: "新房", value: "new" },
    { text: "二手房", value: "old" }
  ]
  const option4 = [
    {
      label: '一室',
      value: '1',
    },
    {
      label: '二室',
      value: '2',
    },
    {
      label: '三室',
      value: '3',
    },
    {
      label: '四室',
      value: '4',
    },
    {
      label: '四室+',
      value: '5',
    },
  ]

  const option5 = [
    {
      label: '东',
      value: '1',
    },
    {
      label: '西',
      value: '2',
    },
    {
      label: '南',
      value: '3',
    },
    {
      label: '东',
      value: '4',
    },
    {
      label: '东南',
      value: '5',
    },
    {
      label: '东北',
      value: '6',
    },
    {
      label: '西南',
      value: '7',
    },
    {
      label: '西北',
      value: '8',
    },
  ]

  const option6 = [
    {
      label: '高楼层',
      value: '1',
    },
    {
      label: '中楼层',
      value: '2',
    },
    {
      label: '低楼层',
      value: '3',
    },
  ]

  const option7 = [
    {
      label: '集中供暖',
      value: '1',
    },
    {
      label: '双卫生间',
      value: '2',
    },
    {
      label: '近地铁',
      value: '3',
    },
    {
      label: '随时看房',
      value: '4',
    },
    {
      label: '精装',
      value: '5',
    },
    {
      label: '公寓',
      value: '6',
    },
    {
      label: '独立卫生间',
      value: '7',
    },
    {
      label: '押一付一',
      value: '8',
    },
    {
      label: '独立阳台',
      value: '9',
    },
    {
      label: '月租',
      value: '10',
    },
    {
      label: '限女生',
      value: '11',
    },
    {
      label: '限男生',
      value: '12',
    },
    {
      label: '新上',
      value: '13',
    },
  ]

 
  // 返回登录页面
  const back = () => {
    navigate('/home')
  }
  // 下拉事件
  const handleSx=(v)=>{
    setValue(v.value)
  }
  // pick
  const pick = (v) => {
    setPickValue(v)
    // console.log(v)
  }
  //户型
  const onRoomType = (arr, items) => {
    // setStatus(true)
    let roomArr = []
    items.map((item) => {
      roomArr.push(item.label)
    })
    setRoomType(roomArr)
  }

  const onOriented = (arr, items) => {
    // setStatus(true)
    let orientedArr = []
    items.map((item) => {
      orientedArr.push(item.label)
    })
    setOriented(orientedArr)
  }

  const onFloor = (arr, items) => {
    // setStatus(true)
    let floorArr = []
    items.map((item) => {
      floorArr.push(item.label)
    })
    setFloor(floorArr)
  }

  const onCharacteristic = (arr, items) => {
    // setStatus(true)
    let characteristicArr = []
    items.map((item) => {
      characteristicArr.push(item.label)
    })
    setCharacteristic(characteristicArr)
  }
  return (
    <div className='box'>
      <div className="buyTop-box">
        {/* <img src={require('../../img/2.png')} style={{width:'100vw'}}/> */}
        <div className='topHouse'>
          <ArrowLeft onClick={() => back()} />
          <b>求购</b>
          <Ellipsis />
        </div>
        {/* 下拉 */}
        <div>
          <DropdownMenu value={value} onChange={v => handleSx(v)} >
            <DropdownMenu.Item placeholder='区域'>
              <Picker value={pickValue} onConfirm={v=>pick(v)} columns={cascaderData} />
            </DropdownMenu.Item>
            <DropdownMenu.Item placeholder='价格' name='value' options={option2} />
            <DropdownMenu.Item placeholder='户型' name='value' options={option3} />
            <DropdownMenu.Item placeholder='筛选' name='value' onOpen={() => onState('right')} />
          </DropdownMenu>
        </div>
      </div>
      <div className="content">
        {/* 列表 */}
        <div className="building">
          <div>
            {
              housing && housing.map((item, index) => {
                return (
                  <dl className='housingDl' key={index} onClick={() => { navigate(`/housingDetail/${item.id}`) }}>
                    <dt>
                      <img src={item.img} alt="" style={{ width: '130px', height: '80px' }} />
                    </dt>
                    <dd>
                      <b style={{ padding: '10px' }}>{item.name}  </b> <br />
                      <p style={{ padding: '10px' }}>{item.address}</p>
                      <b style={{ color: 'orange', padding: '10px' }}>{item.price}万</b>
                    </dd>
                  </dl>
                )
              })
            }
          </div>
        </div>
      </div>
      
      <Popup
        visible={state === 'right'}
        style={{ width: '80%', height: '100%', lineHeight: '40px' }}
        position='right'
        onClose={onClose}
      >
        <div
          style={{ width: '100%', borderBottom: '1px solid #ccc', marginLeft: '10px' }}>
          <b>户型</b>

          <Form.Item name='mulit'>
            <Selector
              options={option4}
              multiple={true}
              onChange={(arr, extend) => onRoomType(arr, extend.items)}
            />
          </Form.Item>

        </div>

        <div
          style={{ width: '100%', borderBottom: '1px solid #ccc', marginLeft: '10px' }}>
          <b>朝向</b>

          <Form.Item name='mulit'>
            <Selector
              options={option5}
              multiple={true}
              onChange={(arr, extend) => onOriented(arr, extend.items)}
            />
          </Form.Item>

        </div>

        <div
          style={{ width: '100%', borderBottom: '1px solid #ccc', marginLeft: '10px' }}>
          <b>楼层</b>

          <Form.Item name='mulit'>
            <Selector
              options={option6}
              multiple={true}
              onChange={(arr, extend) => onFloor(arr, extend.items)}
            />
          </Form.Item>

        </div>

        <div
          style={{ width: '100%', borderBottom: '1px solid #ccc', marginLeft: '10px', marginBottom: '30px' }}>
          <b>房屋亮点</b>

          <Form.Item name='mulit'>
            <Selector
              options={option7}
              multiple={true}
              onChange={(arr, extend) => onCharacteristic(arr, extend.items)}
            />
          </Form.Item>

        </div>

        <div
          style={{ position: 'fixed', bottom: '0px', width: '100%' }}
        >
          <Button style={{ width: '30%' }}>清除</Button>
          <Button
            style={{ width: '70%' }}
            type='info'
            onClick={() => setState('')}
          >确定</Button>
        </div>
      </Popup>

      
    </div>
  )
}
export default BuyHouse;